<template>
  <div class="tabsBox">
    <div class="tabsItem" :class="{'tabsSelItem':selVal == index }"
     @click="tabClick(index)"
     v-for="(item, index) in list" :key="index">
      <div class="tabsItemCon">
        <i class="tabsItemIcon"
         :style="`background-image: url(${item.img});`"></i>
        <span>{{ item.title }}</span>
      </div>
    </div>
    <i v-if="hasECharts" class="tabsIcon"
     title="展示统计图表"
     @click="$emit('eChartsShow')"></i>
  </div>
</template>

<script>
export default {
  props: {
    selVal: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: [],
    },
    hasECharts: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    tabClick(e) {
      if(this.selVal == e) {
        return
      }
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="less" scoped>
.tabsBox {
  position: relative;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 20px;
  overflow: hidden;
  .tabsItem {
    cursor: pointer;
    display: inline-block;
    padding: 0 30px;
    height: 100%;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: normal;
    color: #333333;
    line-height: normal;
  }
  .tabsItemCon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tabsSelItem {
    color: #ffffff;
    background-color: rgba(49, 84, 164, 1);
  }
  .tabsItemIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 8px;
  }
  .tabsItemIcon1 {
    transform: rotate(90deg);
    background-image: url();
  }
  .tabsIcon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('../../../assets/new_modal/16.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>